<template>
  <div>
    <div class="utils-loading-bg" v-if="isShow">
      <div class="loading">
        <div class="number">{{percent}}%</div>
        <div class="utils-flex-Aligncenter" style="height: 100%;">
          <div class="item" v-for="item in percentInt" :key="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      percent: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        isShow: false
      }
    },
    computed: {
      percentInt() {
        // let per = (+ this.percent) | 0
        return parseInt(+this.percent / 10)
      }
    },
    methods: {
      openShow() {
        this.isShow = true
      },
      closeShow() {
        this.isShow = false
      }
    }
  }
</script>

<style scoped lang="less">
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 4%;
    width: 15%;
    border: 2px solid #2BC7F6;
    box-shadow: 0 0 1px #2BC7F6, 0 0 2px #2BC7F6, 0 0 2px #2BC7F6, 0 0 2px #2BC7F6;
    border-radius: 10px;
    padding: 2px;

    >.number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #219fc1;
      font-size: 13px;
    }

    .item {
      height: 100%;
      margin: 2px 1px;
      // background: linear-gradient(0.25turn, #fff, #2BC7F6);
      background-color: #02FFFC;
      width: 10%;
      border-radius: 3px;
      animation: 1s opacity2 0s infinite;
    }
  }

  @keyframes opacity2 {
    0% {
      opacity: 0.5;
    }

    50% {
      opacity: .8;
    }

    100% {
      opacity: 0.5;
    }
  }
</style>
